<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js 标签技术分类展示</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/renderers/CSS2DRenderer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/renderers/CSS3DRenderer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header>
            <h1>Three.js 标签技术分类展示</h1>
            <p>对比CSS2DRenderer、CSS3DRenderer和Sprite三种标签技术的视觉效果和属性特征</p>
        </header>

        <!-- 控制面板 -->
        <div class="control-panel">
            <h3>控制面板</h3>
            
            <!-- 标签类型选择 -->
            <div class="control-section">
                <h4>标签类型</h4>
                <div class="label-buttons">
                    <button class="label-btn active" data-type="css2d">CSS2D标签</button>
                    <button class="label-btn" data-type="css3d">CSS3D标签</button>
                    <button class="label-btn" data-type="css3dsprite">CSS3DSprite标签</button>
                    <button class="label-btn" data-type="sprite">Sprite标签</button>
                    <button class="label-btn" data-type="all">显示所有</button>
                </div>
                <div class="label-legend">
                    <h4>标签渲染技术对比</h4>
                    <div class="legend-item">
                        <span class="legend-color css2d-color"></span>
                        <span>CSS2DRenderer: 绿色，DOM元素，始终面向相机</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color css3d-color"></span>
                        <span>CSS3DRenderer: 蓝色，3D变换，支持透视</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color css3dsprite-color"></span>
                        <span>CSS3DSprite: 橙色，精灵元素，始终面向相机</span>
                    </div>
                    <div class="legend-item">
                        <span class="legend-color sprite-color"></span>
                        <span>Sprite: 紫色，纹理贴图，WebGL渲染</span>
                    </div>
                </div>
            </div>

            <!-- 显示控制 -->
            <div class="control-section">
                <h4>显示控制</h4>
                <div class="control-group">
                    <label>
                        <input type="checkbox" id="show-all" checked>
                        显示所有标签
                    </label>
                </div>
                <div class="control-group">
                    <label>标签显示控制:</label>
                    <div class="label-visibility-controls">
                        <div class="visibility-item">
                            <input type="checkbox" id="show-css2d" checked>
                            <label for="show-css2d">CSS2D</label>
                        </div>
                        <div class="visibility-item">
                            <input type="checkbox" id="show-css3d" checked>
                            <label for="show-css3d">CSS3D</label>
                        </div>
                        <div class="visibility-item">
                            <input type="checkbox" id="show-css3dsprite" checked>
                            <label for="show-css3dsprite">CSS3DSprite</label>
                        </div>
                        <div class="visibility-item">
                            <input type="checkbox" id="show-sprite" checked>
                            <label for="show-sprite">Sprite</label>
                        </div>
                    </div>
                </div>
                <div class="control-group">
                    <label>
                        <input type="checkbox" id="auto-rotate" checked>
                        自动旋转
                    </label>
                </div>
                <div class="control-group">
                    <label>旋转速度:</label>
                    <input type="range" id="rotation-speed" min="0" max="0.05" step="0.001" value="0.01">
                    <span id="rotation-speed-value">0.01</span>
                </div>
            </div>

            <!-- 相机控制 -->
            <div class="control-section">
                <h4>相机控制</h4>
                <div class="control-group">
                    <label>相机距离:</label>
                    <input type="range" id="camera-distance" min="5" max="20" step="0.5" value="10">
                    <span id="camera-distance-value">10</span>
                </div>
            </div>

            <!-- 标签样式 -->
            <div class="control-section">
                <h4>标签样式</h4>
                <div class="control-group">
                    <label>字体大小:</label>
                    <input type="range" id="label-size" min="10" max="24" step="1" value="14">
                    <span id="label-size-value">14px</span>
                </div>
                <div class="control-group">
                    <label>文字颜色:</label>
                    <input type="color" id="label-color" value="#ffffff">
                </div>
                <div class="control-group">
                    <label>背景透明度:</label>
                    <input type="range" id="background-opacity" min="0" max="1" step="0.1" value="0.8">
                    <span id="background-opacity-value">0.8</span>
                </div>
            </div>

            <!-- 性能监控 -->
            <div class="control-section">
                <h4>性能监控</h4>
                <div id="performance-info" class="performance-info">
                    <div>FPS: <span id="fps">0</span></div>
                    <div>标签数量: <span id="label-count">0</span></div>
                    <div>渲染时间: <span id="render-time">0ms</span></div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="main-content">
            <div class="canvas-container">
                <canvas id="canvas"></canvas>
            </div>
        </div>

        <!-- 右侧信息面板 -->
        <div class="info-panel">
            <h3>标签技术对比</h3>
            
            <!-- 当前选中标签信息 -->
            <div class="current-label-info">
                <h4>当前标签类型</h4>
                <div id="current-label-details">
                    <p><strong>类型:</strong> CSS2DRenderer</p>
                    <p><strong>描述:</strong> 基于DOM的2D标签渲染器</p>
                </div>
            </div>

            <!-- 技术特性对比 -->
            <div class="tech-comparison">
                <h4>技术特性对比</h4>
                <div class="comparison-table">
                    <div class="comparison-row header">
                        <div class="feature">特性</div>
                        <div class="css2d">CSS2D</div>
                        <div class="css3d">CSS3D</div>
                        <div class="css3dsprite">CSS3DSprite</div>
                        <div class="sprite">Sprite</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">渲染方式</div>
                        <div class="css2d">DOM</div>
                        <div class="css3d">DOM+3D</div>
                        <div class="css3dsprite">DOM+Sprite</div>
                        <div class="sprite">WebGL</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">3D透视</div>
                        <div class="css2d">❌</div>
                        <div class="css3d">✅</div>
                        <div class="css3dsprite">❌</div>
                        <div class="sprite">✅</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">面向相机</div>
                        <div class="css2d">✅</div>
                        <div class="css3d">❌</div>
                        <div class="css3dsprite">✅</div>
                        <div class="sprite">✅</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">HTML交互</div>
                        <div class="css2d">✅</div>
                        <div class="css3d">✅</div>
                        <div class="css3dsprite">✅</div>
                        <div class="sprite">❌</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">CSS样式</div>
                        <div class="css2d">完全支持</div>
                        <div class="css3d">完全支持</div>
                        <div class="css3dsprite">完全支持</div>
                        <div class="sprite">不支持</div>
                    </div>
                    <div class="comparison-row">
                        <div class="feature">性能</div>
                        <div class="css2d">中等</div>
                        <div class="css3d">较低</div>
                        <div class="css3dsprite">中等</div>
                        <div class="sprite">最高</div>
                    </div>
                </div>
            </div>

            <!-- 属性详情 -->
            <div class="properties-panel">
                <h4>当前标签属性</h4>
                <div id="label-properties">
                    <div class="property-item">
                        <span class="property-name">位置:</span>
                        <span class="property-value" id="label-position">x: 0, y: 0, z: 0</span>
                    </div>
                    <div class="property-item">
                        <span class="property-name">大小:</span>
                        <span class="property-value" id="label-size-display">14px</span>
                    </div>
                    <div class="property-item">
                        <span class="property-name">透明度:</span>
                        <span class="property-value" id="label-opacity-display">0.8</span>
                    </div>
                    <div class="property-item">
                        <span class="property-name">可见性:</span>
                        <span class="property-value" id="label-visibility">可见</span>
                    </div>
                </div>
            </div>

            <!-- 当前标签特性详情 -->
            <div class="label-features">
                <h4>当前标签特性</h4>
                <div id="current-features">
                    <div class="feature-list">
                        <div class="feature-tag">DOM元素</div>
                        <div class="feature-tag">始终面向相机</div>
                        <div class="feature-tag">HTML交互</div>
                        <div class="feature-tag">CSS样式支持</div>
                    </div>
                    <div class="feature-description">
                        <p>CSS2DRenderer使用DOM元素渲染标签，支持完整的HTML和CSS功能，标签始终面向相机，适合需要复杂交互的场景。</p>
                    </div>
                </div>
            </div>

            <!-- 使用场景建议 -->
            <div class="usage-suggestions">
                <h4>使用场景建议</h4>
                <div id="usage-content">
                    <div class="scenario-item">
                        <h5>✅ 推荐场景</h5>
                        <ul>
                            <li>信息面板和工具提示</li>
                            <li>交互式按钮和控件</li>
                            <li>复杂的文本布局</li>
                            <li>需要CSS动画的标签</li>
                        </ul>
                    </div>
                    <div class="scenario-item">
                        <h5>❌ 不推荐场景</h5>
                        <ul>
                            <li>大量标签的高性能渲染</li>
                            <li>需要3D透视效果</li>
                            <li>移动设备上的复杂场景</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 代码使用案例 -->
            <div class="code-examples">
                <h4>代码使用案例</h4>
                <div id="code-content">
                    <div class="code-section">
                        <h5>基础创建</h5>
                        <pre><code>// 创建CSS2D标签
const labelDiv = document.createElement('div');
labelDiv.className = 'css2d-label';
labelDiv.textContent = '标签文本';

const label = new THREE.CSS2DObject(labelDiv);
label.position.set(0, 2, 0);
mesh.add(label);</code></pre>
                    </div>
                    <div class="code-section">
                        <h5>样式设置</h5>
                        <pre><code>// CSS样式
.css2d-label {
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
}</code></pre>
                    </div>
                    <div class="code-section">
                        <h5>渲染器设置</h5>
                        <pre><code>// 创建CSS2D渲染器
const css2dRenderer = new THREE.CSS2DRenderer();
css2dRenderer.setSize(width, height);
css2dRenderer.domElement.style.position = 'absolute';
css2dRenderer.domElement.style.top = '0';
container.appendChild(css2dRenderer.domElement);</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>